<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<!-- 引入样式 -->
<link rel="stylesheet" href="${base}/plugin/element/index.css">
<script src="${base}/plugin/vue/vue.js"></script>
<script src="${base}/plugin/element/index.js"></script>
<script src="${base}/js/axios.min.js"></script>

<style type="text/css">
.content{
   width: 800px;
   text-align: center;
}
.imagebox{
  margin:0px auto;
  width: 600px;
  text-align: center;
}
.el-image {
  text-align: center;
}

.el-pagination{
  text-align: center;
}
.el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon{
  display:none;
}

.btn-prev:before{
    content: "上一页";
}
.btn-next:before{
    content: "下一页";
}

</style>

<title>每日一图</title>
</head>
<body>

<div id="content">
		  <el-pagination
		    background
		    @current-change="handleCurrentChange"
		    layout="prev, pager, next"
		    :total="total"
		    :page-size="pageSize">
		  </el-pagination>
  
	    <div class="imagebox" >
		   <el-image :src="src" :fit="fit" >
		      <div slot="placeholder" class="image-slot">
		                                 加载中<span class="dot">...</span>
		      </div>
		    </el-image>
		 </div>
</div>
	<script type="text/javascript">
	var content = new Vue({
		  el: '#content',
		  data: {
			    fit: 'contain',
	            src: '',
	            currentPage: 1,
	            pageSize: 1,
	            total: 0
		  },
		  methods: {
			      handleCurrentChange(val) {
			        console.log('当前页: '+val);
			        this.currentPage= val;
			        content.loadTableData();
			      },
			      loadTableData: function () {
			    	  const formParams = new FormData()
			          if (this.currentPage) {
			            formParams.append('pageNo', this.currentPage)
			          }
			          if (this.pageSize) {
			            formParams.append('pageSize', this.pageSize)
			          }
			          this.noAyncHttp('${base}' + '/picture/list', formParams).then((res) => {
			        	var fileKey = res.data.content[0].fileKey
			            this.src = '${qnBaseUri}/'+fileKey;
			            this.total = res.data.totalElements;
			          }, (error) => {
			            console.error('出错了', error)
			          })
			        },
			      noAyncHttp (url, params) {
			  		  return new Promise(function (resolve, reject) {
			  		    axios
			  		      .post(url, params)
			  		      .then((response) => {
			  		        resolve(response.data)
			  		        }
			  		      )
			  		      .catch((error) => { // 请求失败处理
			  		        reject(error)
			  		      })
			  		  })
			  	  },
		      }
		})
	
	content.loadTableData();

</script>


<a href="${base}/picture/upload/token">我来上传</a>
<a href="${base}/index">回到首页</a>
</body>
</html>